<template>
	<view class="setting">
		<u-cell-item class="setting-cell_item" :border-bottom="false" bg-color="#ffffff" :title="$t('mine.change_pwd')"
			@click="$goPage('/mine/setting/password')"></u-cell-item>
		<u-cell-item class="setting-cell_item" :border-bottom="false" bg-color="#ffffff" :title="$t('mine.language')"
			v-model="lang" @click="$goPage('/mine/setting/lang')"></u-cell-item>
		<u-cell-item class="setting-cell_item" :border-bottom="false" bg-color="#ffffff" :title="$t('mine.clear_cache')"
			value="0.00M" @click="clearShow = true"></u-cell-item>
		<u-cell-item class="setting-cell_item" :border-bottom="false" bg-color="#ffffff" :title="$t('mine.is_notify_text')"
			 :value="isNotifyText" @click="notifyShow = true">
		</u-cell-item>
		
		<view class="cancel-account" @click="cancelShow = true">{{$t('mine.cancel_account')}}</view>

		<u-modal v-model="clearShow" :show-cancel-button="true" :confirm-text="$t('mine.btn_confirm')"
			:cancel-text="$t('mine.btn_cancel')" :title="$t('mine.remind')" :content="$t('mine.clear_cache2')" @confirm="clear"></u-modal>
		<u-modal v-model="cancelShow" :show-cancel-button="true" :confirm-text="$t('mine.btn_confirm')"
		      :cancel-text="$t('mine.btn_cancel')" :title="$t('mine.remind')"
		      @confirm="cancelAccount">
		      <view class="slot-content">
		         <view v-if="lang == 'English'" style="padding: 20rpx 0 40rpx;text-align:center">Are you sure you want to <text style="color:#eb243e;padding-left:10rpx;padding-right:10rpx"> delete </text> your account?</view>
		         <view v-else style="padding: 20rpx 0 40rpx;text-align:center">{{$t('mine.cancel_account_content')}}</view>
		      </view>
		      </u-modal>

		<view class="setting-copyright">
			<view class="setting-link u-flex u-row-center">
				<view class="setting-link_item" @click="$goPage('/agreement', {type: 0})">{{$t('mine.service_agreement')}}
				</view>
				<view class="setting-link_item">|</view>
				<view class="setting-link_item" @click="$goPage('/agreement', {type: 1})">{{$t('mine.privacy_agreement')}}
				</view>
			</view>
			<view class="setting-copyright_text">{{$t('mine.copyright')}}</view>
		</view>
		<u-picker v-model="notifyShow" :range="notifyList" mode="selector" :confirm-text="$t('mine.btn_confirm')" :cancel-text="$t('mine.btn_cancel')" @confirm="confirmIsNotify"></u-picker>
	</view>
</template>

<script>
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				clearShow: false,
				cancelShow: false,
				notifyShow: false,
				isNotifyText: '',
				lang: "中文",
			}
		},

		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('mine.setting')
			})
			this.getInfo();
		},
		onShow() {
			this.lang = uni.getStorageSync('lang') || '中文';
			this.getInfo();
		},
		components: {},
		computed: {
			i18n() {
				return this.$t('mine')
			},
			notifyList() {
				return [
					this.$t('mine.notifyList[0]'),
					this.$t('mine.notifyList[1]')
				]
			}
		},
		methods: {
			getInfo() {
				this.$http.get('/client/user/account/info', {}).then(res => {
					this.isNotifyText = this.$t('mine.notifyList.'+res.IsNotify);
				});
			},
			clear() {
				uni.showLoading({
					title: this.$t('mine.cacheclearing'),
					mask: true
				});
				setTimeout(() => {
					uni.showToast({
						title: this.$t('mine.cacheclearOK'),
						icon: 'success',
						mask: true
					})
				}, 2000)
			},
			cancelAccount() {
				let that = this;
				that.$http.post('/client/user/account/cancel', {}).then(res => {
					uni.showToast({
						title: that.$t('mine.cancel_account_notice'),
						duration: 1500
					});
					setTimeout(() => {
						this.$store.dispatch('logout', that.vuex_user);
					}, 1500);
				});
			},
			confirmIsNotify(val) {
				let isNotify = val == 0 ? 1 : 2;
				this.isNotifyText = val == 0 ? this.$t('mine.notifyList[0]') : this.$t('mine.notifyList[1]')
				this.$http.post('/mgr/user/account/notify/change', {is_notify: isNotify}).then(res => {
					uni.showToast({
						title: this.$t('mine.save_success'),
						duration: 1500
					});
					this.getInfo();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setting-cell_item {
		height: 100rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;

		&:active {
			background-color: #f9f9f9;
		}
	}

	.setting-copyright {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: 20rpx;

		.setting-link_item,
		.setting-link_item>a {
			color: rgb(40, 161, 254);
			margin: 0 5rpx;
		}

		.setting-copyright_text {
			text-align: center;
			font-size: 24rpx;
			color: #999;
		}
	}

	.cancel-account {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #eb243e;
		text-align: center;
		background-color: #fff;

		&:active {
			background-color: #f9f9f9;
		}
	}
</style>
